<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMyCoupon } from '@/api/me'

const loading = ref(false)

获取用户优惠券
const fetchCoupons = async () => {
   loading.value = true
   try {
     const res = await getMyCoupon()
     if (res.code === 1) {
       coupons.value = res.data.map(c => ({
         id: c.id,
         name: c.name,
         value: c.value,
         minAmount: c.minAmount,
         startTime: c.startTime,
         endTime: c.endTime,
         isExpired: new Date(c.endTime) < new Date(), // 是否过期
       }))
     } else {
       ElMessage.error('获取优惠券失败')
     }
   } catch (error) {
     ElMessage.error('网络错误，请重试')
     console.error('获取优惠券失败:', error)
   } finally {
     loading.value = false
 }
 }

 onMounted(() => {
   fetchCoupons()
   })

// 格式化日期
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${padZero(date.getMonth()+1)}-${padZero(date.getDate())}`
}
const padZero = (num) => num < 10 ? `0${num}` : num
</script>

<template>
  <div class="coupon-container">
    <el-page-header @back="$router.back()" content="我的优惠券" />

    <div v-if="loading" class="loading">加载中...</div>

    <div v-else-if="coupons.length === 0" class="no-coupons">
      暂无优惠券，快去领取吧！
    </div>

    <div v-else class="coupon-list">
      <div v-for="coupon in coupons" :key="coupon.id" class="coupon-item" :class="{ expired: coupon.isExpired }">
        <div class="coupon-content">
          <div class="left">
            <div class="value">¥{{ coupon.value }}</div>
            <div class="condition">满{{ coupon.minAmount }}元可用</div>
          </div>
          <div class="right">
            <div class="name">{{ coupon.name }}</div>
            <div class="time">有效期：{{ formatDate(coupon.startTime) }} - {{ formatDate(coupon.endTime) }}</div>
            <div class="status">
              <el-tag v-if="coupon.isExpired" type="info">已过期</el-tag>
              <el-tag v-else>可用</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.coupon-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coupon-item {
  margin:12px;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.coupon-item.expired {
  opacity: 0.6;
}

.coupon-content {
  display: flex;
  justify-content: space-between;
}

.left {
  text-align: left;
}

.value {
  font-size: 24px;
  color: #ff6b6b;
  font-weight: bold;
}

.condition {
  font-size: 12px;
  color: #999;
}

.right {
  flex: 1;
  padding-left: 16px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.time {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.no-coupons {
  text-align: center;
  color: #999;
  margin-top: 40px;
  font-size: 16px;
}

.loading {
  text-align: center;
  color: #666;
  margin-top: 40px;
}

</style>
